<template>
    <view class="page">
        <view class="cinema-top">
            <view class="tops-item">
                <view class="cinema-img">
                    <image :src="filmInfo.pic"></image>
                </view>
                <view class="cinema-info">
                    <view class="cinema-info-top">
                        <view class="top-name">{{filmInfo.name}}</view>
                        <!-- <view class="top-type">3D IMAX</view> -->
                    </view>
                    <view class="rate-item">
                        <!-- <u-rate :count="5" :disabled="true" v-model="filmInfo.grade" inactive-color="#ffffff" active-color="#FF6E06" :size="30"></u-rate> -->
                        <text class="rate-nun">{{filmInfo.grade}}</text>分
                    </view>
                    <view class="list-type">{{filmInfo.filmTypes}}|{{filmInfo.duration}}分钟</view>
                    <view class="list-type" v-if="filmInfo.publishDate">{{filmInfo.publishDate.slice(0,11)}} 上映</view>
                    <view class="list-type"><text>{{filmInfo.like}}</text>人想看</view>
                </view>
            </view>
        </view>
        <u-sticky offset-top="0">
            <view class="sticky">
                <view class="cinema-down">
                    <view class="down-city" @click="$refs.popupRef.show()">
                        <text>{{position.city}}</text>
                        <image :src="$imgUrl+'images/movie-xiala.png'"></image>
                    </view>
                    <view class="down-city" style="margin-left: 80rpx;" @click="isShow=true">
                        <text>{{area?area:'全城'}}</text>
                        <image :src="$imgUrl+'images/movie-xiala.png'"></image>
                    </view>
                    <!-- <image src="../../static/images/movie-serchs.png" class="serchs"></image> -->
                </view>
                <u-picker mode="selector" v-model="isShow" :default-selector="[0]" :range="areaList" range-key="areaName" @confirm="changeArea"></u-picker>
            </view>
        </u-sticky>
        <view class="cinema-list" v-for="(value,index) in addressList" :key="index" @click="getDataUrl(value)">
            <view class="cinema-name">{{value.cinemaName}}</view>
            <view class="cinema-address-item">
                <view class="address-text">{{value.address}}</view>
                <!-- <view class="distance">{{value.distance}}km</view> -->
            </view>
            <!-- <view class="sessions">近期场次：05/29 10:15 I 05/29 12:15 I 05/29 14:15</view> -->
        </view>

        <popup-layer ref="popupRef" :direction="'right'">
            <view style="width:750upx;height: 100%;overflow:auto;">
                <city v-if="cityList.length>0" :cityList="cityList" @back_city="back_city"></city>
            </view>
        </popup-layer>
    </view>
</template>

<script>
// import {cinemaList,getCity} from "@/api/film.js"
import config from "@/utils/config.js"
import { getCinemaList, getCityList, getCityAreaList, getMovieCinemaList } from "@/api/movie.js"
export default {
    data() {
        return {
            rateValue: 3,
            filmInfo: {},
            position: {},
            addressList: [
                // {
                //     cinemaAddress: "昌平区鼓楼南街佳莲时代广场四层",
                //     cinemaId: 760,
                //     cinemaName: "万达影城（北京昌平保利光魔店）",
                //     cinemaPhone: "010-60700001",
                //     distance: 0.3776,
                //     latitude: 40.2235877647,
                //     longitude: 116.233753059,
                //     regionName: "昌平区",
                // },
                // {
                //     cinemaAddress: "昌平区昌崔路203号果岭假日广场四楼",
                //     cinemaId: 753,
                //     cinemaName: "大地影院（北京菓岭假日店）",
                //     cinemaPhone: "010-89789220",
                //     distance: 2.7768,
                //     latitude: 40.2219721483,
                //     longitude: 116.2639110847,
                //     regionName: "昌平区",
                // }
            ],
            page: 1,
            originalData: [],//影院所有数据
            isPage: true,
            cityList: [],
            cityShowList: [],
            isLoad: false,
            keyWord: '',
            $imgUrl: this.$imgUrl,

            isShow: false,
            selector: [1, 2, 3],
            area: "",
            areaId: "",
            areaList: [],
            $movieApi: this.$movieApi,
        }
    },
    onReachBottom() {
        if (this.isPage) {
            this.page++
            this.getPageData()
        } else {
            this.$toast("没有更多了")
        }
    },
    onLoad(option) {
        let _this = this
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('filmDataFromOpene', function (data) {
            _this.filmInfo = data.data.info
            _this.position = data.data.position
            console.log(data.data.position)
        })
        uni.setNavigationBarTitle({
            title: this.filmInfo.name
        })
        let fun = [
            getCityList(),
        ]
        Promise.all(fun).then(res => {
            this.cityList = res[0].data
            this.getAreaList()
            this.getList()
        })
    },
    methods: {
        back_city(e) {
            if (e) {
                if (e.regionName) {
                    this.$set(this.position, "city", e.regionName)
                    this.position.cityId = e.cityId
                    // uni.setStorageSync('cityId', e.cityId);
                } else {
                    this.$set(this.position, "city", e)
                    let a = e.slice(0, 2)
                    console.log(a, "aaaaaaaa")
                    this.position.cityId = this.cityList.find(item => item.regionName == e.slice(0, 2)).cityId
                }
            }
            this.$refs.popupRef.close();
            this.area = ''
            this.areaId = ''
            this.getAreaList()
            this.getList()
        },
        getAreaList() {
            getCityAreaList({ city_id: this.position.cityId }).then(res => {
                this.areaList = [...[{ areaId: "", areaName: "全区" }], ...res.data]
            })
        },
        getList() {
            getMovieCinemaList({
                movie_id: this.filmInfo.filmId,
                city_id: this.position.cityId,
                area: this.area == "全区" ? "" : this.area,
            }).then(res => {
                this.addressList = res.data.list
            })
        },
        getDataUrl(data) {
            data.area = this.area
            data.cityId = this.position.cityId
            uni.navigateTo({
                url: '/pagesB/movie/choice-movie?movieId=' + this.filmInfo.filmId + '&item=' + encodeURIComponent(JSON.stringify(data))
            })
        },
        getPageData() {

        },
        changeArea(e) {
            this.areaId = this.areaList[e[0]].areaId
            this.area = this.areaList[e[0]].areaName
            this.getList()
        }
    }
}
</script>

<style lang="less">
.cinema-top {
  background-color: #636775;
  padding: 32rpx;
  position: relative;
  .tops-item {
    display: flex;
    align-items: center;
    z-index: 9999;
  }
  .btins {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    // z-index: 99;
    filter: blur(15px);
    -webkit-filter: blur(15px);
  }
  .cinema-img {
    width: 180rpx;
    height: 248rpx;
    image {
      width: 180rpx;
      height: 248rpx;
      border-radius: 20rpx;
    }
  }
  .cinema-info {
    margin-left: 30rpx;
    .cinema-info-top {
      display: flex;
      align-items: center;
      .top-name {
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 600;
      }
      .top-type {
        background-color: #7b7b7b;
        border-radius: 6rpx;
        padding: 2rpx 8rpx;
        color: #ffffff;
        font-size: 17rpx;
        margin-left: 30rpx;
      }
    }
    .rate-item {
      display: flex;
      align-items: center;
      margin-top: 16rpx;
      color: #ffffff;
      .rate-nun {
        color: #ff6e06;
        font-size: 28rpx;
        font-weight: 550;
        // margin-left: 16rpx;
      }
    }
  }
}
.list-type {
  color: #ffffff;
  font-size: 24rpx;
  margin-top: 12rpx;
  text {
    color: #ff6e06;
    font-size: 550;
    margin-right: 8rpx;
  }
}
.cinema-down {
  display: flex;
  align-items: center;
  padding: 22rpx 32rpx;
  border-bottom: 2rpx solid #dfe0e2;
  background-color: #fff;
  .down-city {
    display: flex;
    align-items: center;
    text {
      color: #636775;
      font-size: 28rpx;
    }
    image {
      width: 24rpx;
      height: 24rpx;
      margin-left: 8rpx;
    }
  }
  .serchs {
    margin-left: auto;
    width: 44rpx;
    height: 44rpx;
  }
}

.cinema-list {
  margin: 0rpx 32rpx;
  border-bottom: 2rpx solid #dfe0e2;
  padding: 32rpx 0rpx 40rpx 0rpx;
  .cinema-name {
    color: #2d3039;
    font-size: 32rpx;
    font-weight: 550;
  }
  .cinema-address-item {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    .address-text {
      color: #636775;
      font-size: 24rpx;
      width: 78%;
    }
    .distance {
      color: #636775;
      font-size: 28rpx;
    }
  }
}
.sessions {
  color: #636775;
  font-size: 24rpx;
  margin-top: 24rpx;
}

.region-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  .region-left {
    width: 75%;
    border-radius: 40rpx;
    height: 68rpx;
    background-color: #f5f6f8;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
  }
  .region-val {
    width: 90%;
    font-size: 30rpx;
  }
  .region-btn {
    background: linear-gradient(207deg, #ff9272 0%, #fc5421 100%);
    border-radius: 50rpx;
    height: 68rpx;
    text-align: center;
    width: 140rpx;
    line-height: 68rpx;
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 550;
  }
}
.region-list {
  padding: 22rpx 35rpx;
  color: #2d3039;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2rpx solid #e2e2e2;
}
.empty {
  text-align: center;
  padding-top: 30rpx;
  color: #787a82;
  font-size: 24rpx;
}
</style>
